<template>
    <div class="speech">
        <h1 style="color: #f66;">预警配置</h1>

        <div class="keyWordBox">
            <div class="keyWordForm">
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="预警周期:">
                        <el-radio-group v-model="form.resource">
                            <el-radio value="每天">每天</el-radio>
                            <el-radio value="自定义">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="预警频率(秒):">
                        <el-input v-model="form.frequency" placeholder="30"/>
                    </el-form-item>

                    <el-form-item class="lastFormItem">
                        <el-button type="primary" @click="onSubmit">保存设置</el-button>
                        <el-button @click="clearAway">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
 
const form = reactive({
  keyWord: '', 
  frequency: '', 
})

const onSubmit = () => {
  console.log('submit!')
  console.log(form)
}
</script>

<style scoped>
 .speech {
    flex-direction: row;
}
.keyWordBox{
    height: 450px;
    width: 600px;
    border: 1px solid rgb(0, 196, 215);
    padding: 20px 10px;
}
.keyWordBox:nth-child(1){
     margin-right: 10px;
}
.keyWordForm{
    width: 100%;
    height: 100%;
    text-align: center
}

.titleForm{
    margin-bottom: 15px;
    color: #0191e4;
    font-size: 20px;
    display: inline-block;
    max-width: 100%;
    font-weight: 700;
}

.el-form-item{
    justify-content: center;
}
::v-deep .el-radio__label{
    justify-content: center;
    color: #0191e4;
    font-size: 18px;
}
::v-deep .el-form-item__label{
    font-weight: 700;
    font-size: 18px;
    color: #0191e4;
}
::v-deep .el-form-item__content{
    flex: none;
}
::v-deep .lastFormItem .el-form-item__content{
    margin-left: 0 !important;
}
.el-button:hover{
    background-color: var(--el-button-hover-bg-color);
    border-color: var(--el-button-hover-border-color);
    color: var(--el-button-hover-text-color);
}
.el-table--fit{
    background-color: transparent;
}
</style>